<template>
  <div class="app-container">
    <div style="margin-bottom: 30px">
      <el-row :gutter="20">
        <el-col :span="5">
          <el-input
            placeholder="标题..."
            v-model="queryForm.query"
            clearable
            @keyup.enter="initMemoList(1)"
          ></el-input>
        </el-col>
        <el-button
          type="primary"
          :icon="Search"
          @click="initMemoList(1)"
          v-hasPerm="['system:memo:query']"
          >搜索</el-button
        >
        <el-button
          type="success"
          :icon="DocumentAdd"
          @click="saveMemoHandler(-1)"
          v-hasPerm="['system:memo:add']"
          >新增</el-button
        >
        <el-popconfirm
          title="您确定批量删除这些记录吗？"
          @confirm="handleDelete(null)"
        >
          <template #reference>
            <el-button
              type="danger"
              :icon="Delete"
              :disabled="delBtnStatus"
              v-hasPerm="['system:memo:delete']"
              >批量删除</el-button
            >
          </template>
        </el-popconfirm>
        <el-button @click="resetForm" :icon="Refresh">重置</el-button>
      </el-row>
    </div>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      :row-style="{ height: '40px' }"
      :cell-style="{ padding: '0px' }"
      @selection-change="handleSelectionChange"
      row-class-name="table-row-cls"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column
        prop="title"
        label="标题"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column prop="isFinish" label="是否完成" align="center">
        <template v-slot="{ row }">
          {{ row.isFinish == 0 ? "未完成" : "已完成" }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
        <template v-slot="{ row }">
          <el-switch
            v-model="row.status"
            @change="statusChangeHandle(row)"
            :active-value="0"
            :inactive-value="1"
            size="small"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        align="center"
        width="180"
      />
      <el-table-column
        prop="createTime"
        label="更新时间"
        align="center"
        width="180"
      />
      <el-table-column prop="action" label="操作" width="200" align="center">
        <template v-slot="scope">
          <el-button
            type="primary"
            :icon="Edit"
            @click="saveMemoHandler(scope.row.id)"
            v-hasPerm="['system:memo:edit']"
            size="small"
            link
            >编辑</el-button
          >
          <el-button
            type="warning"
            :icon="Finished"
            @click="doneHandler(scope.row)"
            v-hasPerm="['system:memo:edit']"
            size="small"
            link
            v-if="scope.row.isFinish == 0"
            >未完成</el-button
          >
          <el-button
            type="success"
            :icon="Finished"
            @click="doneHandler(scope.row)"
            v-hasPerm="['system:memo:edit']"
            size="small"
            link
            v-if="scope.row.isFinish == 1"
            >完成</el-button
          >
          <el-button
            type="danger"
            :icon="Delete"
            size="small"
            link
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="queryForm.pageNum"
        v-model:page-size="queryForm.pageSize"
        :page-sizes="[5, 10, 20, 50, 100]"
        :small="false"
        :disabled="false"
        :background="false"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <memo-dialog
      v-model="dialogVisible"
      :memoId="memoId"
      :dialogTitle="dialogTitle"
      :dialogVisible="dialogVisible"
      @initMemoList="initMemoList"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  list,
  updateMemoStatus,
  deleteMemo,
  updateMemoFinish,
} from "@/api/memo";
import MemoDialog from "./components/MemoDialog.vue";
import {
  DArrowRight,
  Delete,
  DocumentAdd,
  Edit,
  RefreshRight,
  Search,
  Tools,
  Refresh,
  Finished,
} from "@element-plus/icons-vue";

const tableData = ref([]);
const total = ref(0);
const queryForm = ref({
  query: "",
  pageNum: 1,
  pageSize: 5,
});
const dialogVisible = ref(false);
const memoId = ref(-1);
const dialogTitle = ref("");
const delBtnStatus = ref(true);
const multipleSelection = ref([]);

//操作备忘录
const saveMemoHandler = (uid) => {
  if (uid > 0) {
    memoId.value = uid;
    dialogTitle.value = "编辑备忘录";
  } else {
    memoId.value = -1;
    dialogTitle.value = "新增备忘录";
  }
  dialogVisible.value = true;
};
const resetForm = () => {
  queryForm.value = {
    query: "",
    pageNum: 1,
    pageSize: 5,
  };
  initMemoList(1);
};
const initMemoList = async (pageNum?: number) => {
  if (pageNum) queryForm.value.pageNum = pageNum;
  let result = await list(queryForm.value);
  let res = result.data;
  if (res.code == 200) {
    tableData.value = res.data.list;
    total.value = res.data.total;
  }
};

const handleSizeChange = (val) => {
  queryForm.value.pageSize = val;
  console.log("queryForm", queryForm);
  initMemoList();
};
const handleCurrentChange = (val) => {
  queryForm.value.pageNum = val;
  initMemoList();
};
const doneHandler = async (row) => {
  if (row.isFinish == 1) {
    row.isFinish = 0;
  } else {
    row.isFinish = 1;
  }

  const result = await updateMemoFinish(row);
  if (result.data.code == 200) {
    ElMessage({
      type: "success",
      message: "操作成功",
    });
    initMemoList();
  } else {
    ElMessage({
      type: "error",
      message: result.data.msg,
    });
  }
};
/**
 * 更新备忘录状态
 */

const statusChangeHandle = async (row) => {
  const res = await updateMemoStatus(row);
  const data = res.data;
  if (data.code == 200) {
    if (row.status == 0) {
      ElMessage({
        type: "success",
        message: "启用备忘录成功",
      });
    } else {
      ElMessage({
        type: "success",
        message: "禁用备忘录成功",
      });
    }
  } else {
    ElMessage({
      type: "error",
      message: data.msg,
    });
  }
};
const handleSelectionChange = (selection) => {
  // 有选择项才有批量删除
  if (selection.length > 0) delBtnStatus.value = false;
  else delBtnStatus.value = true;
  multipleSelection.value = selection;
};

const handleDelete = async (row: any) => {
  ElMessageBox.confirm("您确定要删除这个记录吗?", "信息", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      var memoList: Array<Object> = [];
      if (row) {
        memoList.push(row);
      } else {
        multipleSelection.value.forEach((row: any) => {
          memoList.push(row);
        });
      }
      const res = await deleteMemo(memoList);
      const data = res.data;
      if (data.code == 200) {
        ElMessage({
          type: "success",
          message: data.msg,
        });
        initMemoList(1);
      } else {
        ElMessage({
          type: "error",
          message: data.msg,
        });
      }
    })
    .catch(() => {});
};

onMounted(() => {
  initMemoList();
});
</script>

<style lang="less" scoped>
.app-container {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.header {
  padding-bottom: 16px;
  box-sizing: border-box;
}

.el-pagination {
  float: right;
  padding: 20px;
  box-sizing: border-box;
}

.el-table__cell {
  word-break: break-word;
  height: 40px;
  font-size: 13px;
}

.el-tag--small {
  margin-left: 5px;
}
</style>
<style lang="less">
.table-row-cls {
  .el-button + .el-button {
    margin-left: 0;
  }
}
</style>